<html>
<head>
    <title>水平</title>
</head>
<style>
    ul,li{
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    nav{
        width: 100%;
        height: 60px;
        margin: 50px auto;
        background-color: rgb(232, 231, 227);
    }
    ul{
        width: 100%;
        height: 60px;
    }
    li{
        float: left;
        width: 14.28%;
        text-align: center;
        line-height: 60px;
    }
    a{
        color: #000;
        text-decoration: none;
        display: block;
    }
    a:hover{
        color: white;
        background: rgb(63, 63, 63);
    }
</style>
<body>
        <nav>
            <ul>
                <li><a href="#">HTML/CSS</a></li>
                <li><a href="#">Browser Side</a></li>
                <li><a href="#">Server Side</a></li>
                <li><a href="#">Programming</a></li>
                <li><a href="#">XML</a></li>
                <li><a href="#">Web Building</a></li>
                <li><a href="#">Reference</a></li>
            </ul>
        </nav>
</body>
</html>